<template>
    <div>
        <Modal title="密码修改" width="300" @on-visible-change="changeStatusHandle"  v-model="isShowPwdModal" @on-cancel="closeModal" @on-ok="confirmModal"  :mask-closable="false" :closable="false">
            <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="80">
                <FormItem label="旧密码：" prop="previousPwd">
                    <Input type="password" v-model="formInline.previousPwd" placeholder="请输入旧密码..."/>
                </FormItem>
                <FormItem label="新密码：" prop="newPassword">
                    <Input type="password" v-model="formInline.newPassword" placeholder="请输入新密码..."/>
                </FormItem>
            </Form>
            <div slot="footer" style="text-align: center">
                <Button @click="closeModal">取消</Button>
                <Button type="primary" @click="confirmModal('formInline')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="tsx">
import { Component, Prop } from "vue-property-decorator";
import MiXinModal  from '@/mixin/views/modal';
import { SYSUSER_UPDATE_PWD, INFO, SAVE } from "@/store/modules/crud/keys";

@Component
export default class TheUpdatedUserPwd extends MiXinModal {
    @Prop(Boolean)isShowPwdModal!: boolean;

    formInline = {
        id: 'null',
        previousPwd: '',
        newPassword: ''
    }
    ruleInline = {
        previousPwd: [
            { required: true, message: '请输入原密码.', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码应大于6位', trigger: 'blur' }
        ],
        newPassword: [
            { required: true, message: '请输入新密码.', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码应大于6位', trigger: 'blur' }
        ]
    }
    get _name(){
        return SYSUSER_UPDATE_PWD;
    }
    closeModal(){
        this.$emit("close-pwd-modal");
    }
    confirmModal(formInline: any){
        (this.$refs[formInline] as any).validate(async (valid: any) => {
            if (valid) {
                this.$store.commit(INFO,{ name: this._name, info: this.formInline });
                const promise = await this.$store.dispatch(SAVE,{name: this._name});
                if(promise.data==1){
                    this.$Message.success("密码修改成功!");
                    this.closeModal();
                    return ;
                }
                if(promise==undefined){
                    this.$Message.error("密码修改失败!");
                }
            }
        })
    }
    changeStatusHandle(){
        if(this.isShowPwdModal){
            this.formInline.previousPwd = '';
            this.formInline.newPassword = '';
        }
    }
}
</script>

<style>
.ivu-modal-header-inner {
    text-align: center;
}
</style>
